<template>
  <div>
    <basic-container>
      <!-- 返回按钮 -->
      <div style="margin-bottom: 20px;">
        <el-button @click="goBack" icon="el-icon-arrow-left" type="primary" size="small">
          返回
        </el-button>
      </div>

      <!-- 基础信息部分 -->
      <el-card shadow="never" class="mb-20">
        <div slot="header" class="clearfix">
          <span class="header-title">基础信息</span>
          <span class="header-title" style="margin-left: 50px; font-weight: normal; font-size: 14px">{{ status === 0 ?
            "未使用" : "已使用" }}</span>
        </div>
        <div class="basic-container__card" style="display: flex; flex-wrap: wrap; font-size: 14px">
          <el-row style="padding: 10px 160px 10px 20px">
            优惠券名称：{{ title }}
          </el-row>
          <el-row style="padding: 10px 160px 10px 20px">
            优惠券时长：{{ days }}
          </el-row>
          <el-row style="padding: 10px 160px 10px 20px">
            优惠券抵扣金额：{{ amount }}
          </el-row>
          <el-row style="padding: 10px 160px 10px 20px">
            优惠券详情说明：优惠券详情说明内容
          </el-row>
        </div>
      </el-card>
    </basic-container>

    <basic-container>
      <!-- 基础信息部分 -->
      <el-card shadow="never" class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px; font-weight: bold">发放使用详情</span>
        </div>
        <div class="never-content" style="display: flex; align-items: center">
          <div class="info-item" style="margin-left: 10px; font-size: 14px; font-weight: bold">
            <span class="info-label">发放数量：</span>
            <span class="info-value">{{ send_count }}</span>
          </div>
          <div class="info-item" style="margin-left: 20px; font-size: 14px; font-weight: bold">
            <span class="info-label">使用数量：</span>
            <span class="info-value">{{ use_count }}</span>
          </div>
          <div class="info-item" style="margin-left: 20px; font-size: 14px; font-weight: bold">
            <span class="info-label">状态：</span>
            <el-select v-model="status" placeholder="请选择优惠券状态（默认不限）" size="small">
              <el-option label="不限" value=""></el-option>
              <el-option label="已使用" value="used"></el-option>
              <el-option label="未使用" value="unused"></el-option>
              <el-option label="已过期" value="expired"></el-option>
            </el-select>
          </div>
        </div>
      </el-card>
      <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" v-model="form" ref="crud"
        @on-load="onLoad">
        <template slot-scope="{ row }" slot="status">
          <p v-if="row.status == 0" class="blue-normal">已使用</p>
          <p v-else-if="row.status == 1" class="green-normal">未使用</p>
          <p v-else-if="row.status == 2">
            <span class="red-normal">已禁用</span>
          </p>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getDetail } from "./api/couponList";
export default {
  data () {
    return {
      // 获取id
      id: "",
      days: "",
      title: "",
      amount: "",
      status: "",
      send_count: "",
      use_count: "",
      description: "", // 新增字段
      couponDetail: null, // 存储完整接口返回数据

      form: {},
      query: {},
      loading: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      selectionList: [],
      option: {
        menu: false, // 隐藏操作栏
        addBtn: false, // 隐藏添加按钮
        menuType: "button",
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: false, // 隐藏搜索栏
        searchMenuSpan: 6,
        border: false,
        index: true,
        viewBtn: false,
        selection: false,
        dialogClickModal: false,
        labelWidth: 110,
        searchLabelWidth: 100,
        column: [
          {
            label: "用户",
            prop: "nickname",
            display: false,
          },
          {
            label: "发放时间",
            prop: "created_at",
            type: "date",
          },
          {
            label: "有效期",
            prop: "end_time",
            type: "date",
            width: 300,
          },
          {
            label: "状态",
            prop: "status",
            type: "select",
            dicData: [
              {
                label: "已使用",
                value: 0,
              },
              {
                label: "未使用",
                value: 1,
              },
              {
                label: "已过期",
                value: 2,
              },
            ],
          },
          {
            label: "使用时间/过期时间",
            prop: "end_time",
            type: "date",
          },
          {
            label: "使用路径",
            prop: "usePath",
            type: "select",
          },
        ],
      },
      data: [],
      currentItemData: null,
    };
  },
  methods: {
    // 返回上一页
    goBack () {
      this.$router.go(-1);
    },

    // 新增方法：获取详情数据
    fetchCouponDetail () {
      this.loading = true;
      getDetail(this.id)
        .then((response) => {
          const data = response.data.list || response;
          console.log("完整响应数据:", data);
          this.data = data;
          // 更新页面数据
          this.$nextTick(() => {
            console.log("表格数据已更新，DOM 已重新渲染");
            // 这里可以添加刷新后的操作，比如滚动到顶部等
            // this.$refs.crud && this.$refs.crud.$el.scrollIntoView();
          });
        })
        .catch((error) => {
          console.error("获取优惠券详情失败:", error);
          this.$message.error("获取优惠券详情失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created () {
    // 先从路由参数获取基本数据
    this.id = this.$route.query.id;
    this.days = this.$route.query.days;
    this.title = this.$route.query.title;
    this.amount = this.$route.query.amount;
    this.status = this.$route.query.status;
    this.send_count = this.$route.query.send_count;
    this.use_count = this.$route.query.use_count;
    console.log(
      "id为",
      this.id,
      this.days,
      this.title,
      this.count,
      this.use_count,
      this.amount,
      this.status
    );
    // 调用接口获取完整详情
    this.fetchCouponDetail();
  },
};
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
}

.header-tag {
  float: right;
}

.info-form {
  padding: 0 20px;
}

.desc-form {
  padding: 0 20px 20px;
}

.usage-form {
  padding: 0 20px 20px;
}

.user-table {
  padding: 0 20px 20px;
}

/* 状态标签样式 */
.el-tag--success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.el-tag--info {
  background-color: #f4f4f5;
  color: #909399;
}

.el-tag--danger {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>
